<template>
<Card style="height:800px">
    <Row>
        <span>角色代码</span>
        <Input v-model="inRoleCode" placeholder="角色代码" style="width: 200px" />
        <span style="width: 200px;margin-left: 20px;">角色名称</span>
        <Input v-model="inRoleName" placeholder="角色名称" style="width: 200px" />
        <span @click="searchPage()" style="margin: 0 10px;"><Button icon="search" type="info">搜索</Button></span>
        <Button @click="cleanCondition" type="info">取消</Button>
        <Button @click="handleAdd" style="margin-left: 15px;" type="info">新建角色</Button>
    </Row>
    <Row class="margin-top-10 searchable-table-con1" style="margin-top:20px;">
        <Table :columns="columns1" :data="dataPage" @on-sort-change="sortChange"></Table>
        <div style="margin: 10px;overflow: hidden">
            <div style="float: right;">
                <Page :total="dataTotal" :current="pageNo" :page-size="pageSize" @on-change="handlePageChange"></Page>
            </div>
        </div>
    </Row>
    <transition>
        <add-roles v-if="toggleAddMenus" :roles-list="menuTree" v-model="selectList" @on-submit="handleSubmitAddMenusPop" @on-cancel="handleCancelAddMenusPop">
        </add-roles>
    </transition>
</Card>
</template>

<script>
import addRoles from './components/add-roles.vue'

export default {
  name: 'role',
  data () {
    return {
      baseUrl: this.$appContext.marvels_core_system,
      $ajax: null,
      columns1: [{
        title: '序号',
        type: 'index',
        width: 80,
        align: 'center'
      },
      {
        align: 'center',
        title: '角色代码',
        key: 'roleCode'
      },
      {
        align: 'center',
        title: '角色名称',
        key: 'roleName'
      },
      {
        align: 'center',
        title: '角色优先级',
        key: 'roleLevel'
      },
      {
        align: 'center',
        title: '状态',
        key: 'status',
        render: (h, params) => {
          const vm = this
          return h('div', {
            domProps: {
              innerHTML: vm.renderColumnContext(params)
            }
          }, params.content)
        }
      },
      {
        align: 'center',
        title: '描述',
        key: 'description'
      },
      {
        align: 'center',
        title: '最后更新时间',
        key: 'updatedDate',
        sortable: 'custom',
        sortType: 'desc',
        render: (h, params) => {
          var vm = this
          return h('div', [
            h('span', vm.$util.formatTime(params.row.updatedDate))
          ])
        }

      },
      {
        align: 'center',
        title: '最后更新人员',
        key: 'updatedBy'
      },
      {
        align: 'center',
        title: '操作',
        width: 200,
        key: 'action',
        render: (h, params) => {
          var vm = this
          return h('div', [
            h('Button', {
              props: {
                type: 'primary',
                size: 'small'
              },
              style: {
                marginRight: '5px'
              },
              on: {
                click: () => {
                  vm.$router.push({
                    name: 'roleEditor',
                    query: {
                      type: 1,
                      index: params.row.roleId
                    }
                  })
                }
              }
            }, ' 编辑'),
            h('Button', {
              props: {
                type: 'primary',
                size: 'small'
              },
              style: {
                marginRight: '5px'
              },
              on: {
                click: () => {
                  vm.choosedRow = params.row
                  vm.handleAddMenus()
                }
              }
            }, '权限设置'),
            h('Button', {
              props: {
                type: 'error',
                size: 'small'
              },
              on: {
                click: () => {
                  vm.handleDel(params)
                }
              }
            }, ' 删除')
          ])
        }
      }
      ],
      inRoleCode: '',
      inRoleName: '',
      dataPage: [],
      dataTotal: 0,
      pageTotal: 1,
      pageNo: 1,
      pageSize: 10,
      sortBy: 'updatedDate',
      sortType: 'desc',
      toggleAddMenus: false,
      menuTree: [], // 整个菜单树
      selectList: [], // 页面双向绑定渲染，当前角色选中的菜单
      choosedRow: null
    }
  },
  methods: {
    // 表格单元格渲染布尔值
    renderColumnContext: function (rowContext) {
      if (rowContext.column.key === 'status') {
        return rowContext.row.status === 1 ? '启用' : '禁用'
      }
    },
    sortChange: function (column, key, order) {
      if (column.order !== 'normal') {
        this.sortBy = column.key
        this.sortType = column.order
        this.searchPage()
      }
    },
    // 分页查询
    searchPage (initParam) {
      var params = {
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        param: {
          roleCode: this.inRoleCode,
          roleName: this.inRoleName,
          sortBy: this.sortBy,
          sortType: this.sortType
        }
      }
      if (initParam) {
        params = initParam
      }
      var url = 'system/pmsn/service/rolePageList/' + params.pageNo + '/' + params.pageSize
      this.$ajax.post(this.baseUrl + url, params.param).then(re => {
        var data = re.data
        var code = data.code
        var message = data.message
        if (code !== 'success') {
          this.$Message.warning(message)
          return
        }
        this.dataPage = data.data.list
        this.dataTotal = data.data.total
        this.pageTotal = data.data.pages
        this.pageNo = data.data.pageNum
      }).catch(er => {

      })
    },
    // 翻页
    handlePageChange (index) {
      this.pageNo = index
      this.searchPage()
    },
    // 清空查询条件
    cleanCondition: function () {
      this.inRoleCode = null
      this.inRoleName = null
    },
    // 保存角色权限设置
    handleSubmitAddMenusPop (list) {
      this.selectedMenus = []
      this.getSelectedMenus(list)
      var roleCode = this.choosedRow.roleCode
      var params = {
        roleId: this.choosedRow.roleId,
        roleCode: roleCode,
        menus: this.selectedMenus
      }
      this.$ajax.post(this.baseUrl + 'system/pmsn/service/addMenuRelation', params).then(re => {
        var data = re.data
        var code = data.code
        var message = data.message
        if (code !== 'success') {
          this.$Message.warning(message)
          return
        }
        this.toggleAddMenus = false
      }).catch(er => {

      })
    },
    // 组装勾选的菜单数据
    getSelectedMenus: function (menuList) {
      if (menuList && menuList.length > 0) {
        for (var i in menuList) {
          var menu = menuList[i]
          if (menu.selectAll || menu.selectNotAll) {
            this.selectedMenus.push({
              roleCode: this.choosedRow.roleCode,
              menuCode: menu.menuCode
            })
            this.getSelectedMenus(menu.children)
          }
        }
      }
    },
    // 关闭权限设置弹窗
    handleCancelAddMenusPop () {
      this.toggleAddMenus = false
    },
    // 打开权限设置弹窗
    handleAddMenus () {
      var params = {
        roleCode: this.choosedRow.roleCode
      }
      this.$ajax.post(this.baseUrl + 'system/service/menuTree', params).then(re => {
        var data = re.data
        var code = data.code
        var message = data.message
        if (code !== 'success') {
          this.$Message.warning(message)
          return
        }
        var map = data.data
        this.menuTree = this.toTree(map.menuTree)
        this.selectList = this.toTree(map.roleMenus)
        this.toggleAddMenus = true
      }).catch(er => {

      })
    },
    toTree: function (list) {
      if (list !== null && list.length > 0) {
        for (var i in list) {
          var node = list[i]
          node.id = node.menuRelation
          node.name = node.menuName
          this.toTree(node.children)
        }
      }
      return list
    },
    // 新建角色按钮
    handleAdd () {
      this.$router.push({
        name: 'roleEditor',
        query: {
          type: 2
        }
      })
    },
    handleDel (rowContext) {
      this.choosedRow = rowContext.row
      var config = {
        title: '提示',
        content: '是否确认删除?',
        onOk: this.deleteRole
      }
      this.$Modal.confirm(config)
    },
    deleteRole: function () {
      var vm = this
      var params = {
        roleId: this.choosedRow.roleId
      }
      this.$ajax.post(this.baseUrl + 'system/pmsn/service/delRole', params).then(re => {
        var data = re.data
        var code = data.code
        var message = data.message
        if (code !== 'success') {
          this.$Message.warning(message)
          return
        }
        vm.searchPage()
      }).catch(er => {

      })
    }
  },
  mounted () {
    this.$ajax = this.$util.ajax()
    var params = {
      pageNo: this.pageNo,
      pageSize: this.pageSize,
      param: {
        sortBy: this.sortBy,
        sortType: this.sortType
      }
    }
    this.searchPage(params)
  },
  created: function () {
    console.log('init role....')
  },
  components: {
    addRoles
  }
}
</script>
